<template>
    <div class="bottom-bar">
        <div class="check-content">
            <check-btn class="checkAll" @click.native="checkClick" :isActive="isSelectAll"/>
            <span>全选</span>
        </div>
        <div class="totalPrice">
            合计: ￥{{totalPrice}}
        </div>
        <div class="calculate" @click="calculateClick">
            去计算({{checkLength}})
        </div>
    </div>
</template>

<script>
    import CheckBtn from 'content/checkbtn/CheckBtn'

    export default {
        name: "CartBottomBar",
        components: {
            CheckBtn
        },
        computed: {
            totalPrice() {
                return this.$store.state.products.filter(item => {
                    return item.checked
                }).reduce((preValue, item) => {
                    return preValue + item.price * item.count
                }, 0).toFixed(2)
            },
            checkLength() {
                return this.$store.state.products.filter(item => item.checked).length
            },
            isSelectAll() {
                if (this.$store.getters.products.length == 0) return false;
                return !this.$store.getters.products.find(item => !item.checked)
            }
        },
        methods: {
            checkClick() {
                 if (this.isSelectAll) {
                    this.$store.getters.products.forEach(v => v.checked = false)
                }else {
                    this.$store.getters.products.forEach(v => v.checked = true)
                }
            },
            calculateClick() {
                if (!this.isSelectAll) {
                    this.$toast.show('请选择你要购买的商品!')
                }
            }
        }
    }
</script>

<style scoped>
    .bottom-bar {
        height: 40px;
        background-color: #eee;
        position: relative;
        line-height: 40px;
        display: flex;
        font-size: 14px;
    }

    .check-content {
        display: flex;
        align-items: center;
        margin-left: 10px;
        width: 60px;
    }

    .checkAll {
        width:19px;
        height: 19px;
        line-height: 16px;
        margin-right: 5px;
    }

    .totalPrice{
        margin-left: 30px;
        flex: 1;
    }

    .calculate {
        width: 90px;
        background-color: red;
        text-align: center;
        color: #fff;
    }
</style>